<template>
  <div>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="toIndex">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">工作台</template>
        <el-menu-item index="2-1">编辑</el-menu-item>
        <el-menu-item index="2-2" @click="toM12Blog">文章</el-menu-item>
        <el-menu-item index="2-3">项目</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">GIT</template>
          <el-menu-item index="2-4-1">Github</el-menu-item>
          <el-menu-item index="2-4-2">Gitee</el-menu-item>
          <el-menu-item index="2-4-3">本地</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3">消息中心</el-menu-item>
      <el-menu-item index="4">近期任务</el-menu-item>
      <el-menu-item style="width: 300Px;position:absolute;right:0;">
        <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">

          <el-button slot="append" icon="el-icon-search" @click="toM12Blog"></el-button>
        </el-input>
      </el-menu-item>
    </el-menu>


    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span slot="title">b l o g</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">GO</el-menu-item>
          <el-menu-item index="1-2">C#</el-menu-item>
          <el-menu-item index="1-3">Java</el-menu-item>
          <el-menu-item index="1-4">Python</el-menu-item>
          <el-menu-item index="1-6">Node.js</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">小情绪</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="toM12About">MarkDown</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="3">
        <i class="el-icon-location"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
    <div class="divTable">
      <!--   @cell-click = "cellClick" 点击行有反应注册这个函数    -->
      <template>
        <el-table
          :data="tableData"
          style="width: 100% ;">
          <el-table-column
            cell-style="font-weight: 700"
            prop="Data"
            label="时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop=Title
            label="题目"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Language"
            label="标签">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
              <el-button @click="open(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    name: "blog",
    data() {
      return {
        tabPosition: 'top',
        isCollapse: false,
        tableData: []
      }

    },
    mounted: function () {
      this.init()
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      toM12About: function () {
        let that = this;
        that.$router.push({path: '/about'});
      },
      toM12Blog: function () {
        let that = this;
        that.$router.push({path: '/blog'});
      },
      toM12Home: function () {
        let that = this;
        that.$router.push({path: '/'});
      },
      toM12Insp: function () {
        let that = this;
        that.$router.push({path: '/Inspiration'});
      },
      toM12ME: function () {
        let that = this;
        that.$router.push({path: '/contactMe'});
      },
      toIndex: function () {
        let that = this;
        that.$router.push({path: '/'});
      },
      getData() {
        let that = this;
        let formData = new FormData();
        formData.append("test", "0");
        /*that.axios({
          url: '/api/initVue',
          method: 'post',
          data: formData,

        }).then(function (response) {
          if(response.status  === 200 ){
            let m12 = response.data.m12status;
            console.log("初始化",m12);
            if( m12 === 403) {
              that.$router.push({path: '/login'});
            }
          }
        });*/ //如果需要验证才可以访问火箭数据请使用这段代码
        that.axios({
          url: "/api/mongoFind",
          method: 'post',
          data: formData,
        }).then(function (response) {
          if (response.status === 200) {
            that.tableData = response.data;
            console.log("mongo", that.tableData)
          }
        })
      },
      init() {
        let that = this;
        let formData = new FormData();
        formData.append("test", "0");
        that.axios({
          url: '/api/initVue',
          method: 'post',
          data: formData,

        }).then(function (response) {
          if (response.status === 200) {
            let m12 = response.data.m12status;
            console.log("初始化", m12);
            that.getData();
            if (m12 === 403) {
              that.$router.push({path: '/login'});
            }
          }
        });
      },
      handleClick: function (row, column, cell, event) {
        let that = this;
        console.log("row:\n", row, "\n", "column:\n", column, "\n", "cell:\n", cell, "\n", "event:\n", event);
        //Vue.prototype.$Uid =row.Uid; //将全局变量模块挂载到Vue.prototype中
        console.log("选择的cookei是：", row.Uid);
        //that.$router.push({path:'/showMd'}); //不会再新面页打开
        that.setCookie("selectTemp", row.Uid)
        // let formData = new FormData();  //如果需要火箭知道请使用这段代码
        // formData.append("selectNumber",row.Uid);
        // that.axios({
        //   url:"/api/insSelectId",
        //   method:'post',
        //   data:formData,
        // }).then(function (response) {
        //   if(response.status == 200){
        //     console.log("m12收到", row.Uid);
        //     window.open(   that.$router.resolve({path: '/showMd'}).href ,'_blank'  );
        //   }
        // });
        window.open(that.$router.resolve({path: '/showMd'}).href, '_blank');
      },
      blogDelete: function (row) {

        let that = this;
        let formData = new FormData();
        formData.append("count",row.Uid)
        that.axios({
          url :'/api/deleteBlog',
          method :'post',
          data: formData,
        }).then(function (response) {
          if(response.status == 200){
           console.log(response.data.m12Uid);
          }
        });
        console.log("我特么就是要删除这一个", row.Uid);

      },
      open(row) {
        this.$confirm('确认提交内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.blogDelete(row);
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.getData()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消或填写不完整~'
          });
        });
      }
    }
  }


</script>

<style scoped>
  el-tab-pane {

  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 16%;
    min-height: 400px;
    top: 0px;
  }
  .divTable{
    width: 80%;
    right: 3%;
    top:  10%;
    position: absolute;
  }
</style>
